<template>
  <el-form  :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
    <div style="font-size: 16px;font-weight: 600;"><el-radio></el-radio>查询列表</div>
    <el-row style="margin-top: 20px;">
      <el-form-item label="批次名称">
        <el-input v-model="state.dataForm.batchName" type="text" placeholder="请输入"  clearable style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="state.dataForm.remark" type="text" placeholder="请输入"  clearable style="width: 200px;"></el-input>
      </el-form-item>
      <el-form-item label="导入日期">
        <el-date-picker v-model="state.daterange" type="daterange" value-format="YYYY-MM-DD" :range-separator="$t('datePicker.range')" :start-placeholder="$t('datePicker.start')" :end-placeholder="$t('datePicker.end')"> </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">查询批次</el-button>
      </el-form-item>
    </el-row>
  </el-form>
  <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec', 'whiteSpace': 'nowrap' }"
  v-loading="state.dataListLoading"  :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
    <el-table-column type="selection"></el-table-column>
    <el-table-column align="center" prop="id" label="ID" width="100" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="batch" label="批次名称" width="280" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="exhName" label="所属展会" width="160" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="creator" label="导入人" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="preCount" label="导入前数量" width="120" show-overflow-tooltip></el-table-column>
      <template v-if="isAdmin">
        <el-table-column align="center" prop="addCount" label="新增数量" width="120" show-overflow-tooltip></el-table-column>
    </template>
    <el-table-column align="center" prop="postCount" label="导入后数量" width="120" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="collator" label="整理人" width="150" show-overflow-tooltip></el-table-column>
    <el-table-column align="center" prop="remark" label="导入备注" show-overflow-tooltip>
      <template #default="{ row }">
        <span :title="row.remark" :style="{ 'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis','cursor': 'pointer'}">{{ row.remark.split('\n')[0] }}</span>
      </template>
    </el-table-column>
  </el-table>
  <el-button v-if="state.hasPermission('crm:import:query')"  @click="batchQuery()" type="primary" style="margin-top: 30px;" :disabled="state.multiple">查询</el-button>
  <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
    :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
    @current-change="state.pageCurrentChangeHandle"> </el-pagination>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import baseService from "@/service/baseService";
const view = reactive({
  getDataListURL: '/crm/crmpersonjoinbatch/page',
  getDataListIsPage: true,
  deleteURL: "/crm/crmexhiproject",
  deleteIsBatch: true,
  daterange: null,
  dataForm: {
    startTime: null as number | null,//开始时间
    endTime: null as number | null,//结束时间
    id: "",
    batch:"",
    batchName:"",
    batchIdsStr:"",
    state:1,
    remark:"",
  }
});

const init = () => {
  getInfo();
};

//是否为管理员
const isAdmin = ref(false);
const getInfo = () => {
  return baseService.get("/sys/user/info").then((res) => {
    isAdmin.value = res.data.userId === '1';
  });
};


const router = useRouter();
//查找批次
const batchQuery = () => {
  let ids2: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids2.push(state.dataListSelections![i].id);
  }
  const idsStr = ids2.join(',');
  state.dataForm. batchIdsStr = idsStr;

  router.push({
    path: "/expocube/information-list-import",
    query: {
      ids2:idsStr,
      state2:state.dataForm.state
    }
  });
  state.getDataList()
};

const state = reactive({ ...useView(view), ...toRefs(view) });

const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};
watch(
  () => state.daterange,
  (val: number[] | null) => {
    if (val === null) {
      state.dataForm.startTime = null;
      state.dataForm.endTime = null;
    } else {
      state.dataForm.startTime = val[0];
      state.dataForm.endTime = val[1];
    }
  }
);
init();
</script>
<style>
.el-table{
  cursor: pointer;
}
</style>

